<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 有name属性 */
        [name]{
            background-color: #6ff;
        }
        /* 有name属性,属性值为four */
        [name='four']{
            background-color: pink;
        }

        [name='four'][title='ffff']{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul class="list one">
            <li id="first">01</li>
            <li class="mid">02</li>
            <li class="mid">03</li>
            <li name="four" title="ffff">04</li>
        </ul>
        <ul class="list two">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
        </ul>
    </div>
</body>
<script>
    
    // 通过选择器查询 -> 传入一个css选择器(css2 / css3),对应选择器查找元素

    // document.querySelector()     单元素查询 如果是单个元素->返回被查找的元素,如果有多个默认返回第一个  如果找不到-> null

    // document.querySelectorAll()  多元素查询 -> 将查询的元素放到集合中返回(即便只有一个元素也要放到集合中 没有元素=>[])


    // var one = document.getElementsByClassName("one")[0];
    // console.log(one);

    // var one = document.querySelector(".one");
    // console.log(one);

    // var first = document.querySelector(".one li");
    // console.log(first);

    // var first = document.querySelector(".three");
    // console.log(first);
    

    var four = document.querySelector("[name='four']");
    console.log(four);

    // 多元素查询
    var firstList = document.querySelectorAll("#first");
    console.log(firstList);

    // .one li
    var liList = document.querySelectorAll(".one li");
    console.log(liList);

    // .one .mid
    var midList = document.querySelectorAll(".one .mid");
    console.log(midList);


    var midList = document.querySelectorAll(".two .mid");
    console.log(midList); // []





</script>
</html>